<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<script src="../../script/mui.min.js"></script>
		<script src="../../script/jquery.min.js"></script>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/personal.css">
		<link rel="stylesheet" href="../../css/exam.css">
		<title>霍兰德职业倾向分析考试页</title>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.weui_mask {
				position: fixed;
				z-index: 998;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			.weui_dialog {
				z-index: 999;
			}
			.swiper-wrapper {
				min-height: 400px
			}
			.stu-test .mui-btn-primary {
				color: #fff;
				background-color: #FF9900;
				border: 1px solid #FF9900;
				padding-left: 2em;
				padding-right: 2em;
			}
			.questionItemImgDiv {
				width: 20rem
			}
			#question_Holland  input[type=checkbox]:before {
				content: '';
			}
			.mui-checkbox input[type=checkbox] {
				-webkit-appearance: radio;
				appearance: radio;
				-webkit-appearance: radio; /* Safari 和 Chrome */
				top: 14px;
				right: 2px;
				display: inline-block;
				width: 28px;
				height: 19px;
			}
			.mui-checkbox span {
				line-height: 48px;
				text-align: center;
			}
			.test-answer-list .mui-input-row label {
				padding-left: -5px;
				background: url(../../image/icon_holland.png) no-repeat 1% 50%;
				background-size: 35px;
				content: '1'
			}
			.imgDiv {
				background: url(../../image/icon_holland.png) no-repeat 0% 50%;
				background-size: 34px;
				color: #FFFFFF;
				width: 34px;
				font-size: 14px;
				height: 48px;
				/*padding: 0 12px;*/
			}
			.xuanzeDiv {
				height: 48px;
				margin-left: 5px;
				font-size: 14px;
				/*width: 80%;*/
			}
			.stu-test .mui-btn-primary.mui-active:enabled, .stu-test .mui-btn-primary:enabled:active {
				background-color: #FF9900;
				color: #fff;
				border: 1px solid #FF9900;
			}
		</style>
	</head>
	<body >
		<div class="stu-test" id="scroll">
			<div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;z-index: 998" ></div>
			<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
				<div class="base_navigation_bar base_style_color base_navigation_item_bar">
					<a class="base_left_item" href="#" onclick="backKey()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
					<span id="title">测评分析</span>
				</div>
			</div>
			<div class="space10 " style="margin-top: 64px"></div>
			<div class="k-con test-m-bottom70 test-analysis" id="question_div">
				<div class="swiper-container">
					<div class="swiper-wrapper" >
						<!--<div class="swiper-slide" id="item' + (i + 1) + '" itemtype="' + data[i].qtype + '">
						<div class="k-con-part3 clearfix">
						<p class="k-f16 k-c323 k-mt5 indent-5">
						1.不懂就要问
						</p>
						<div class="test-answer-list left_10"  itemtype="' + data[i].qtype + '">
						<div class="mui-input-row mui-radio mui-left " >
						<input id="name" class="left_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入您最想做的工作/专业" >
						</div>
						<div class="mui-input-row mui-radio mui-left " >
						<input id="name" class="left_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入您最想做的工作/专业" >
						</div>
						<div class="mui-input-row mui-radio mui-left " >
						<input id="name" class="left_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入您最想做的工作/专业">
						</div>
						</div>
						</div>
						</div>
						<div class="swiper-slide" id="item' + (i + 1) + '" itemtype="' + data[i].qtype + '">
						<div class="k-con-part3 clearfix">
						<p class="k-f16 k-c323 k-mt5 indent-5">
						2.不懂就要问
						</p>
						<div class="test-answer-list left_10"  id="question_Holland">
						<div class="mui-input-row mui-checkbox " >
						<span class="imgDiv">1</span>
						<span class="xuanzeDiv" >checkbox左侧显示示例</span>
						<input name="checkbox1" value="Item 1" type="checkbox">
						</div>
						<div class="mui-input-row mui-checkbox " >
						<span class="imgDiv">2</span>
						<span class="xuanzeDiv" >checkbox左侧显示示例</span>
						<input name="checkbox1" value="Item 1" type="checkbox">
						</div>
						<div class="mui-input-row mui-checkbox " >
						<span class="imgDiv">10</span>
						<span class="xuanzeDiv" >checkbox左侧显示示例checkbox左侧显示示例checkbox左侧显示示例</span>
						<input name="checkbox1" value="Item 1" type="checkbox">
						</div>
						</div>
						</div>
						</div>
						<div class="swiper-slide" id="item' + (i + 1) + '" itemtype="' + data[i].qtype + '">
						<div class="k-con-part3 clearfix">
						<span id="itemType" class="k-f18">单选题</span>
						<p class="k-f16 k-c323 k-mt5 indent-5">
						3.不懂就要问
						</p>
						<div class="test-answer-list left_10"  itemtype="' + data[i].qtype + '">
						<div class="mui-input-row mui-radio mui-left " >
						<label>对</label>
						<input Itemindex="' + i + '" dataindex="' + (k + 1) + '" name="radio' + data[i].qid + '" type="radio"   itemid="' + data[i].qid + '">
						</div>
						<div class="mui-input-row mui-radio mui-left " >
						<label>不对</label>
						<input Itemindex="' + i + '" dataindex="' + (k + 1) + '" name="radio' + data[i].qid + '" type="radio"   itemid="' + data[i].qid + '">
						</div>
						<div class="mui-input-row mui-radio mui-left " >
						<label>不懂</label>
						<input Itemindex="' + i + '" dataindex="' + (k + 1) + '" name="radio' + data[i].qid + '" type="radio"   itemid="' + data[i].qid + '">
						</div>
						</div>
						</div>
						</div>
						-->
					</div>
				</div>
			</div>
			<div class="k-con1 k-text-center k-fixed-bottom test-bottom1" id="sub_div">
				<div class="k-con-part1">
					<button type="button" class="mui-btn mui-btn-primary"  id="btn1" style="display: none">
						下一题
					</button>
					<button type="button" class="mui-btn mui-btn-primary"  id="btn2" style="display: none">
						提交
					</button>
				</div>
			</div>
			<div class="weui_dialog_alert" id="closeAlert" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum2"></strong>
					</div>
					<div class="weui_dialog_ft">
						<a onclick="Cancel()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
			<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum">是否确定退出评测</strong>
					</div>
					<div class="weui_dialog_bd"></div>
					<div class="weui_dialog_ft">
						<a onclick="cleanCancel()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
						<a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<!--<script type="text/javascript" src="../../script/evaluationAnalysis.js"></script>-->
	<script type="text/javascript">
		var mid = "";
		var titleArr = new Array();
		var questionLen = "";
		var enumber = "";
		var itemtypeArr = new Array();
		var type = '4';
		var textArr = new Array();
		var LunshuQidArr = new Array();
		var AnswerArr = new Array();
		apiready = function() {
		    sendBuriedNotifi('0', '霍兰德职业倾向分析考试页', '161');
		
			$("#title").html('霍兰德职业倾向测评');
			listenScroll();
			$('#btn1').show();
			$('#btn2').hide();
			loadData();
			getMid();
		}
		
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				uname : $api.getStorage('cfnetppusername'),
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}
		//论述题提交数据
		function addLunShuReviewData(i, mySwiper) {
			GetAnswerData(0)
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				type : type,
				enumber : enumber,
				itemtype : itemtypeArr[i],
				qid : LunshuQidArr[i],
				lunshu : textArr.toString(),
				mid : mid,
			};
			if (textArr.length < 3) {
				ShowToast('请答题');
				return false;
			}
			for (var k = 0; k < textArr.length; k++) {
				if (textArr[k] == "") {
					ShowToast('请答题');
					return false;
				}
			}
			//			var url_addReviewFourone = 'http://base.cfnet.org.cn/index.php/train/review/addReviewFourone';
			cfnetppPOST(url_addReviewFourone, param, true, function(data, status) {
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						mySwiper.slideNext();
					} else {
						api.toast({
							msg : '提交失败',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '提交失败',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		//多选题提交数据
		function addReviewData(i, mySwiper) {
			GetAnswerData(i);
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				type : type,
				enumber : enumber,
				itemtype : itemtypeArr[i],
				titles : titleArr[i],
				answer : AnswerArr,
				mid : mid,
			};
			//			var url_addReviewFourone = 'http://base.cfnet.org.cn/index.php/train/review/addReviewFour';
			cfnetppPOST(url_addReviewFour, param, true, function(data, status) {
				//			popu(param);
				//			popu(data)
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						mySwiper.slideNext();
					} else {
						api.toast({
							msg : '提交失败',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '提交失败',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		//提交最后一题
		function addEndReviewData(i) {
			GetAnswerData(i);
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				type : type,
				enumber : enumber,
				itemtype : itemtypeArr[i],
				titles : titleArr[i],
				answer : AnswerArr,
				mid : mid,
				message:'《霍兰德职业倾向测评》'
			};
			//			var url_endReviewFour = 'http://base.cfnet.org.cn/index.php/train/review/endReviewFour';
			cfnetppPOST(url_endReviewFour, param, true, function(data, status) {
				SendBusinessOperationsLogNotifi('霍兰德职业倾向分析考试页', '161', param, param, '', data, '提交霍兰德职业倾向分析考试接口', '161-01')
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data;
						sendNotifi();
						openEvaluationAnalysisScore(list);
					} else {
						api.toast({
							msg : '提交失败',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '提交失败',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}
		 function sendNotifi(){
			api.sendEvent({
		        name:'RefreshPracticeNotifi'
	        });
		}

		function loadData() {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				type : type,
			};
			//			var url_getReview = 'http://base.cfnet.org.cn/index.php/train/review/getReview';
			cfnetppPOST(url_getReview, param, true, function(data, status) {
				//			popu(data);
				//			popu(param);
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data;
						if (list != null && list != "") {
							enumber = list.enumber;
							if (list.shitiarr != null && list.shitiarr != '') {
								GetReviewData(list.shitiarr, list.sum);
							} else {
								PopupHint2('题目为空');
							}
						} else {
							PopupHint2('暂无试题');
						}
					} else {
						api.toast({
							msg : '获取测验题目数据失败',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '获取测验题目数据失败',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function getMid() {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				type : type,
				enumber : enumber,
			};
			//			var url_startReview = 'http://base.cfnet.org.cn/index.php/train/review/startReview';
			cfnetppPOST(url_startReview, param, true, function(data, status) {
				//			popu(data);
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data;
						if (list != null && list != "") {
							mid = list;
						}
					} else {
						api.toast({
							msg : '获取数据失败',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '获取数据失败',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function GetReviewData(shitiarr, len) {
			var questionArr = new Array();
			for (var i = 0; i < len; i++) {
				var question = shitiarr[i.toString()];
				questionArr.push(question);
			}
			SetUI(questionArr);
		}

		// 滚动监听
		function listenScroll() {
			var winHeight = $(window).height();
			//获取当前页面高度
			$(window).resize(function() {
				var thisHeight = $(this).height();
				if (winHeight - thisHeight > 50) {
					//当软键盘弹出，在这里面操作
					$("#sub_div").css('display', 'none');
				} else {
					$("#sub_div").css('display', 'block');
					//当软键盘收起，在此处操作
				}
			});
		}

		function PopupHint2(str) {
			$("#checkNum2").text(str);
			$('#closeAlert').show();
		}

		function Cancel() {
			$('#closeAlert').hide();
			backClick();
		}

		//得到答案数据
		function GetAnswerData(slideNumber) {
			//多选题选项id
			var itemtype = $(".swiper-wrapper").children().eq(slideNumber).attr('itemtype');
			itemtypeArr[slideNumber] = itemtype;
			var itemAnswerObj = new Object();
			var qid = "";
			var dataindex = "";
			var duooptionid = '';
			var qidArr = new Array();
			var answitemArr = new Array();
			var obj = $(".swiper-wrapper").children().eq(slideNumber).find('input');
			AnswerArr = [];
			//清空数组
			//获取题目类型
			$(".swiper-wrapper").children().eq(slideNumber).find('input').each(function(i) {
				if ($(this).attr('type') === 'checkbox') {
					titleArr[slideNumber] = $(this).attr('titles');
					if (this.checked == true) {
						duooptionid = "1";
						dataindex = $(this).attr('dataindex') - 1;
						qidArr[dataindex] = $(this).attr('qid');
						answitemArr[dataindex] = duooptionid;
					} else {
						duooptionid = "0";
						dataindex = $(this).attr('dataindex') - 1;
						qidArr[dataindex] = $(this).attr('qid');
						answitemArr[dataindex] = duooptionid;
					}
					AnswerArr.push({
						qid : qidArr[i],
						answer : answitemArr[i],
					});
				} else if ($(this).attr('type') === 'text') {
					dataindex = $(this).attr('dataindex') - 1;
					LunshuQidArr[dataindex] = $(this).attr('qid');
					if ($(this).val()) {
						textArr[dataindex] = $(this).val();
					} else {
						textArr[dataindex] = "";
					}
				}
			});
		}

		function SetUI(list) {
			var qxuan = '';
			var data = list;
			questionLen = data.length;
			var OrderNumStr = ''
			var questionStr = "";
			var xuanzeStr = "";
			var questionsItemImgstr = "";
			var xuanzheImgstr = "";
			var quanArr = new Array();
			var titleStr = "";
			for (var i = 0; i < questionLen; i++) {
				OrderNumStr = '<span id="itemType" class="k-f18 " >第' + data[i].types + '部分</span>';
				$(".swiper-wrapper").append('<div class="swiper-slide" id="item' + (i + 1) + '" itemtype="' + data[i].types + '"  ></div>')
				if (data[i].types == 2 || data[i].types == 3 || data[i].types == 4) {//多选题
					quanArr = GetQuanList(data[i])
					questionStr = data[i].content;
					titleStr = data[i].titles;
					$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + OrderNumStr + '<p class="k-f16 k-c323 k-mt5 indent-5">' + questionStr + '</p>' + '<p class="k-f16 k-c323 k-mt5 indent-5">' + titleStr + '</p>' + '<div class="test-answer-list left_10"    id="question_Holland"     >' + '</div>' + '</div>')
					for (var k = 0; k < quanArr.length; k++) {
						xuanzeStr = htmlspecialchars_decode(quanArr[k].questions);
						$("#item" + (i + 1) + " .test-answer-list").append('<div class="mui-input-row mui-checkbox  " >' + '  <span class="imgDiv">' + (k + 1) + '</span>' + '<span class="xuanzeDiv" >' + xuanzeStr + '</span>' + '<input name="checkbox1" value="Item 1" type="checkbox" qid="' + quanArr[k].qid + '" dataindex="' + (k + 1) + '" Itemindex="' + i + '" titles="' + titleStr + '" >' + '</div> ')
					}
				} else if (data[i].types == 1) {
					quanArr = data[i].items.qxuanxiang;
					questionStr = htmlspecialchars_decode(data[i].items.questions);
					$("#item" + (i + 1)).append('<div class="k-con-part3 clearfix">' + OrderNumStr + '<p class="k-f16 k-c323 k-mt5 indent-5">' + questionStr + '</p>' + '<p class="k-f16 k-c323 k-mt5 indent-5">' + titleStr + '</p>' + '<div class="test-answer-list left_10"     onclick="GetAnswerData(' + i + ')">' + '</div>' + '</div>')
					for (var k = 0; k < quanArr.length; k++) {
						xuanzeStr = '';
						$("#item" + (i + 1) + " .test-answer-list").append('<div class="mui-input-row mui-radio mui-left  " >' + '<input id="test_item' + (k) + '" class="left_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入您最想做的工作/专业"  qid="' + data[i].items.qid + '"   dataindex="' + (k + 1) + '">' + '</div> ')
					}
				}
			}
			var mySwiper = new Swiper('.swiper-container', {
				autoHeight : true,
				//用户操作swiper之后，是否禁止autoplay
				autoplayDisableOnInteraction : true,
				direction : 'horizontal',
				//				allowSwipeToPrev : false,
				loop : false,
				onlyExternal : true,
				onSlideChangeStart : function(swiper) {
					if (mySwiper.activeIndex != mySwiper.slides.length - 1) {
						$('#btn1').show();
						$('#btn2').hide();
					} else {
						$('#btn1').hide();
						$('#btn2').show();
					}
				},
			})
			// 底部按钮
			$('#btn1').click(function() {
				if (mySwiper.activeIndex == 0) {//论述题
					addLunShuReviewData(mySwiper.activeIndex, mySwiper);
					//					mySwiper.slideNext();
				} else {
					addReviewData(mySwiper.activeIndex, mySwiper);
				}
			});
			$('#btn2').click(function() {
				addEndReviewData(mySwiper.activeIndex);
			});
		}

		function kebackListen() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				//coding...
				backKey()
			});
		}

		function backKey() {
			$('#offlineAlert').show();
		}

		function cleanCancel() {
			$('#offlineAlert').hide();
		}

		//确定
		function cleanConfirm() {
			$('#offlineAlert').hide();
			backClick();
		}

		function backClick() {
//		SendBehaviorTrajectoriesNotifi1('1', '霍兰德职业倾向分析考试页', '161', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title);
					     sendBuriedNotifi('1', '霍兰德职业倾向分析考试页', '161');
			api.closeWin({
			});
		}

		//打开测验结果页
		function openEvaluationAnalysisScore(list) {
//		   SendBehaviorTrajectoriesNotifi1('1', '霍兰德职业倾向分析考试页', '161', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title);
		sendBuriedNotifi('1', '霍兰德职业倾向分析考试页', '161');
			var y = 0;
			var h = api.winHeight - y;
			
			api.openWin({useWKWebView:true,
				name : 'HolandeAnalysis_window',
				url : '../Holander/HolandeAnalysis_window.html',
				rect : {
					x : 0,
					y : y,
					w : 'auto',
					h : h,
				},
				pageParam : {
					data : list,
				},
				bounces : false,
				vScrollBarEnabled : true,
				hScrollBarEnabled : false
			});
			setTimeout(function() {
				api.closeWin();
			}, 1000);
		}
	</script>
</html>